<template>
	<view class="content">
		<!-- 空白页 -->
		<empty v-if="nodata"></empty>
		<!-- 订单列表 -->
		<view v-for="(item,index) in orderList" :key="index" class="order-item">
			<view class="info">
				<text class="title">
					当前微信账户
				</text>
				<text class="info_content">
					<text class="info_content_tips">{{item.content}}</text>
					<text class="price">{{item.value}}</text>
				</text>
			</view>
			<view class="time">
				<text>{{item.ctime}}</text>
				<text class="price" v-if="item.state==2">成功</text>
				<text class="price" v-else>失败</text>
			</view>
		</view>
		<view class="middle" v-if="showMore">
			{{ loadingType === 0 ? contentText.contentdown : loadingType === 1 ? contentText.contentrefresh : contentText.contentnomore }}
		</view>

	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from "@/components/empty";
	var _self,
		page = 1,
		timer = null;
	export default {

		data() {
			return {
				showMore: false,
				loadingText: '加载中...',
				loadingType: 0,
				contentText: {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了!'
				},
				orderList: [],
				nodata: false
			};
		},

		onLoad(options) {
			_self = this;
			this.loadData();

		},
		onPullDownRefresh: function() {
			//下拉刷新的时候请求一次数据
			this.loadData();
		},
		onReachBottom: function() {
			//触底的时候请求数据，即为上拉加载更多
			//为了更加清楚的看到效果，添加了定时器

			// 正常应为:
			_self.getmore();
		},
		components: {
			uniLoadMore,
			empty
		},
		methods: {
			getmore() {
				_self.showMore = true;
				if (_self.loadingType !== 0) {
					return false;
				}
				_self.loadingType = 1;
				uni.showNavigationBarLoading(); //显示加载动画
				this.$api.http.get('user-records', {
					page: page
				}).then(res => {
					if (res) {
						page++; //每触底一次 page +1
						_self.orderList = _self.orderList.concat(res.data.list); //将数据拼接在一起
						_self.orderList.forEach(item => {
							if(item.content=='下级开通会员分成'){
								item.content='邀请入驻奖励'
							}
						});

						_self.loadingType = 0; //将loadingType归0重置
						uni.hideNavigationBarLoading(); //关闭加载动画
						if (res.data.list.length == 0) {
							//没有数据
							_self.loadingType = 2;
							uni.hideNavigationBarLoading(); //关闭加载动画
							return;
						}
					}
				})
			},
			//获取列表
			loadData() {
				page = 1;
				this.loadingType = 0;
				uni.showNavigationBarLoading();
				this.$api.http.get('user-records', {}).then(res => {
					if (res) {
						page++;
						this.orderList = res.data.list;
						this.orderList.forEach(item => {
							if(item.content=='下级开通会员分成'){
								item.content='邀请入驻奖励'
							}
						});
						
						uni.hideNavigationBarLoading();
						uni.stopPullDownRefresh(); //得到数据后停止下拉刷新
						if (this.orderList.length == 0) {
							this.nodata = true
						} else {
							this.nodata = false
						}
					}
				})
			},
			onDateChange: function(e) {
				const val = e.detail.value
				this.time = this.currDate[val];
				this.loadData()
			}
		},
	}
</script>

<style lang="scss">
	page,
	.content {
		background: #f8f8f8;
	}

	.middle {
		text-align: center;
		line-height: 80rpx;
		font-size: 26rpx;
	}

	.info_content {
		float: left;
		width: 100%;
	}

	.swiper-box {
		height: calc(100% - 40px);
	}

	.list-scroll-content {
		height: 100%;
	}

	.navbar {
		display: flex;
		height: 40px;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0, 0, 0, .06);
		position: relative;
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: #303133;
			position: relative;

			&.current {
				color: #f06c7a;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid #f06c7a;
				}
			}
		}
	}

	.uni-swiper-item {
		height: auto;
	}

	.order-item {
		display: flex;
		flex-direction: column;
		padding-left: 30upx;
		padding-right: 30upx;
		background: #fff;
		margin: 16upx 3% 0;
		border-radius: 30upx;

		.i-top {
			display: flex;
			align-items: center;
			height: 80upx;
			font-size: 28upx;
			color: #303133;
			position: relative;

			.time {
				flex: 1;
			}

			.state {
				color: #f06c7a;
			}

		}

		.info_content_tips {
			color: #949494;
			font-size: 24upx;
		}

		.info {
			margin-top: 30upx;
			font-size: 28upx;
			color: #333;

			.title {
				float: left;
			}

			.price {
				float: right;
				font-weight: bold;
				color: #f06c7a;
			}
		}

		.time {
			font-size: 26upx;
			color: #999;
			margin: 20upx 0 30rpx;
			display: flex;
			justify-content: space-between;

			.price {
				float: right;
				font-weight: bold;
				color: #f06c7a;
			}
		}


	}

	/*边框*/
	.b-b:after,
	.b-t:after {
		position: absolute;
		z-index: 3;
		left: 0;
		right: 0;
		height: 0;
		content: '';
		-webkit-transform: scaleY(0.5);
		-ms-transform: scaleY(0.5);
		transform: scaleY(0.5);
		border-bottom: 1px solid #E4E7ED;
	}

	.b-b:after {
		bottom: 0;
	}

	.b-t:after {
		top: 0;
	}

	.uni-list-cell {
		margin: 20rpx 3%;
		overflow: hidden;
		background: #f06c7a;
		padding: 15rpx 30rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: #fff;

		.uni-list-cell-left {
			float: left;
		}

		.uni-list-cell-db {
			float: right;
			width: 75%;
		}
	}
</style>